<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门管理管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="assets/layui/css/layui.css" media="all" />
		<link rel="stylesheet" type="text/css" href="assets/css/all.css"  />
	</head
	<body>
		<div class="layui-fluid" >
			<div class="layui-form">
				<div class="layui-input-inline">
					<input style="width:260px" id="key1" type="text" name="title" lay-verify="" placeholder="请输入部门或岗位查询" autocomplete="off" class="layui-input">
				</div>
				<button class="layui-btn layui-btn-primary" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>
				<button class="layui-btn addBtn"><i class="layui-icon">&#xe654;</i>新增</button>
				<button class="layui-btn delBtn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</button>
				<button class="layui-btn freshBtn layui-btn-green"><i class="layui-icon">&#x1002;</i>刷新</button>
			</div>
			<div class="layui-btn-group" style="margin-top:8px;">
			    <button class="layui-btn layui-btn-primary" id="expand">全部展开</button>
			    <button class="layui-btn layui-btn-primary" id="collapse">全部收起</button>
		    </div>
		    <div id="departTable" style="width:70%;"></div>
		</div>
		<script src="assets/layui/layui.js" type="text/javascript"></script>
		<script src="assets/js/all.js" type="text/javascript"></script>
		<script type="text/javascript">
			var layout = [
			    { name: '部门名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
//			    { name: '上级部门', treeNodes: false, headerClass: 'value_col', colClass: 'value_col', style: '',render:function(){
//			    	return '总公司'
//			    } },
        		{name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 20%', render: function(row) {
		            return '<a class="layui-btn layui-btn-danger layui-btn-xs editBtn">编辑</a>';   //列渲染
		        }},
    
			];
			layui.use(['tree','layer','laypage','form','table'],function(){
				var table = layui.table,
					layer = layui.layer,
					laypage = layui.laypage,
					form = layui.form,
					tree = layui.tree,
					$ = layui.$
					
					var tree1 = layui.treeGird({
				        elem: '#departTable', //传入元素选择器
				        spreadable: false, //设置是否全展开，默认不展开
				        checkbox : true,
				        nodes: [{
				                "id": "1",
				                "name": "总公司",
				                "children": [{
				                        "id": "11",
				                        "name": "河北分公司"
				                    },
				                    {
				                        "id": "12",
				                        "name": "山西分公司"
				                    }
				                ]
				            }
				        ],
				        layout: layout
				    });
				
				    form.render();
				
				    $('#collapse').on('click', function() {
				        layui.collapse(tree1);
				    });
				
				    $('#expand').on('click', function() {
				        layui.expand(tree1);
				    });
				
				    form.on('checkbox(*)', function(data){
				        console.log(data.elem); //得到checkbox原始DOM对象
				        console.log(data.elem.checked); //是否被选中，true或者false
				        console.log(data.value); //复选框value值，也可以通过data.elem.value得到
				        console.log(data.othis); //得到美化后的DOM对象
				
				        var arr = layui.getSelected(tree1);
				        console.log(arr.length)
				    });
//				    form.on('checkbox(layTableAllChoose)',function(){
//				    	if($(this).siblings(".layui-unselect").hasClass("layui-form-checked")){
//				    		$('input[type="checkbox"]').siblings(".layui-unselect").removeClass("layui-form-checked")
//				    	}else{
//				    		$('input[type="checkbox"]').siblings(".layui-unselect").addClass("layui-form-checked")
//				    	}
//				    });
					//全选 取消全选
					$(".layui-tree-spread").parents("tr").find(".layui-unselect").click(function(){
						if($(this).hasClass("layui-form-checked")){
				    		$('input[type="checkbox"]').siblings(".layui-unselect").removeClass("layui-form-checked")
				    	}else{
				    		$('input[type="checkbox"]').siblings(".layui-unselect").addClass("layui-form-checked")
				    	}
					});

					$('.searchBtn').on('click', function() {
						var key1 = $('#key1').val();		
							//执行重载
							tableIn.reload({
//								if(key1==''&key2==''&key3=''){
//									layer.msg("请输入搜索内容");
//									return;
//								}
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									key1: key1,								
								}
							});
					});
					//编辑
					$(".editBtn").click(function(){
						var trId = $(this).parents("tr").attr("id");
						console.log(trId);
						var index = layer.open({
							type:2,
							title:'编辑部门',
							area:["900px",'500px'],
							content:'editDepart.html' //+'row.id'
						});
						//layer.full(index);
					});
					//删除信息
					$(".delBtn").click(function(){
						if($(".layui-form-checked").length<1){
							layer.msg("请选择要删除的信息")
						}else{
							var index = layer.confirm("确认删除选中信息吗？",function(){
								$(".layui-form-checked").parents("tr").remove();
								layer.close(index);
							})
						}
					});
				
					//监听新增帐户
					$(".addBtn").click(function(){
						var index = layer.open({
							type:2,
							title:'新增部门',
							area:["900px",'500px'],
							content:'addNewDepart.html'
						});
						//layer.full(index);
					})
	
			})
		</script>
	</body>

</html>